<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<myheader :leftType="2" leftUrl="/pages/login/login" :noLeft="false" showTitle="用户服务协议&隐私条款"></myheader>
		<!-- #endif -->
		<view class="top" :style="{ top: `${statusBarHeight}px` }">
			<view class="top-item" :key="index" v-for="(item, index) in arr" :class="activeIndex == index ? 'top-item_active':''" @tap="changeType(index+1)">{{ item }}</view>
			<view class="top-line" :class="activeIndex == 0? 'left12' : 'left62'"></view>
		 </view>
		<view style="padding: 10px;">
			<view v-if="type==1" style="padding: 10px;background-color: white;border-radius: 10px;font-size: 14px;line-height: 25px;color:#2e4964">
				<view v-html="serviceContent"></view>
			</view>
			<view v-if="type==2" style="padding: 10px;background-color: white;border-radius: 10px;font-size: 14px;line-height: 25px;color:#2e4964">
				<view v-html="privateContent"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import myheader from '../../components/header/index.vue';
	export default {
		components: {
			myheader
		},
		beforeMount() {
			// #ifdef MP-WEIXIN
			let custom = wx.getMenuButtonBoundingClientRect();
			wx.getSystemInfo({
				success: res => {
					this.statusBarHeight = (res.statusBarHeight + (custom.top - res.statusBarHeight)) +
						custom.height + 10
				}
			});
			// #endif
		},
		data() {
			return {
				type: 1,
				arr: ['用户服务协议', '隐私条款'],
				activeIndex: 0,
				serviceContent: '',
				privateContent: '',
				statusBarHeight: ''
			}
		},
		onLoad(options) {
			if (options.type == 1) {
				this.type = 1
			} else {
				this.type =2
			}
		},
		onShow() {
			this.getContent()
		},
		methods: {
			async getContent() {
				uni.showLoading({
					title: '加载中...'
				})
				if (this.type == 1) {
					this.$H.get("portal/sys/serviceProtocol", {  }, {
						'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
					}).then(res => {
						uni.hideLoading();
						if (res.code == 0) {
							this.serviceContent = res.data.content
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
					});
				}
				if (this.type == 2) {
					this.$H.get("portal/sys/privacyProtocol", {  }, {
						'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
					}).then(res => {
						uni.hideLoading();
						if (res.code == 0) {
							this.privateContent = res.data.content
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
					});
				}
			},
			changeType(type) {
				this.type = type
				this.activeIndex = type -1
				this.getContent()
			}
		}
	}
</script>

<style lang="scss" scoped>
.top {
	width: 100%;
	height: 94rpx;
	display: flex;
	position: sticky;
	z-index: 10;
	left: 0;
	top:0;
	background: #f4f6f7;
	&-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #2E4964;
		&_active {
			color: #1ABC9C;
			font-weight: bold;
		}
	}
	&-line {
		width: 20rpx;
		height: 8rpx;
		background: #1ABC9C;
		border-radius: 40rpx;
		position: absolute;
		bottom: 4px;
		transition: all .3s;
	}
}
.left12 {
	left: calc(25% - 10rpx)
}
.left62 {
	left: calc(75% - 10rpx)
}
</style>